<template>
  <div class="mod-config">
    <el-row>
      <el-col :span="2">
        <el-tabs tab-position="left" style="height: 100%;" @tab-click="tabClick">
          <el-tab-pane label="查看所有" name=""></el-tab-pane>
          <el-tab-pane :label="item.name" v-for="(item,i) in tabbarList" :key="i" :name="item.id"></el-tab-pane>
        </el-tabs>    
      </el-col>
      <el-col :span="22">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item label="标题">
            <el-input v-model="queryObj.and.like.title" placeholder="标题" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryObj.and.must.status">
              <el-option label="全部" value=""></el-option>
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
              <div class="block">
                <el-date-picker
                  v-model="queryObj.and.ge.create_time"
                  type="datetime"
                  placeholder="选择起始时间"
                  :value-format="dateFormat">
                </el-date-picker>
              </div>
          </el-form-item>  
          <el-form-item>
              <div class="block">
                <el-date-picker
                  v-model="queryObj.and.le.create_time"
                  type="datetime"
                  placeholder="选择结束时间"
                  :value-format="dateFormat">
                </el-date-picker>
              </div>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <!-- <el-button @click="getDataList2()">测试多条件查询</el-button> -->
            <!-- <el-button v-if="isAuth('forum:tabbaritem:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> -->
            <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
            <!-- <el-button v-if="isAuth('forum:tabbaritem:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
            <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%;">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            prop="title"
            header-align="center"
            align="center"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="icon"
            header-align="center"
            align="center"
            label="图标">
            <template slot-scope="scope">
              <img :src="scope.row.icon" width="50px">
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="所属标签">
            <template slot-scope="scope">
              <span v-text="findTabbarNameById(scope.row.tabbarId)"></span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="跳转类型"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.jumpType == 0" size="small">不跳转</span>
              <span v-if="scope.row.jumpType == 1" size="small">站内跳转</span>
              <span v-if="scope.row.jumpType == 2" size="small">站外跳转</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="jumpUrl"
            header-align="center"
            align="center"
            label="跳转路径"
            width="250">
          </el-table-column>
           <el-table-column
            prop="sort"
            header-align="center"
            align="center"
            label="排序值"
            sortable
            width="100">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" size="small" type="danger">禁用</el-tag>
            <el-tag v-else size="small">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="创建时间"
          sortable
          width="200">
        </el-table-column>

          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="queryObj.pageParams.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryObj.pageParams.limit"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import AddOrUpdate from './tabbaritem-add-or-update'
  export default {
    data () {
      return {
        dataForm: {
          key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        dateFormat:"yyyy-MM-dd HH:mm:ss",
        tabbarList:[],
        queryObj: {
          pageParams: {
            page: 1,  //当前页   
            limit:10,//每页记录数
            sidx: "sort",
            order: "",
          },
          and: {//放在and里面的都是 并且条件
            like: {title:''}, //模糊匹配
            must:{tabbar_id:'',status:''}, //精确匹配
            ge:{'create_time':''}, //大于 xxx值
            le:{'create_time':''}, //小于 xxx值
            between: [ //范围匹配（注意，时间条件不要用范围查询，效果不好）
              ['sort','','']
            ],
          }
        }
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
      this.getTabbarList();
    },
    methods: {
      // 每页数
      sizeChangeHandle (val) {
        this.queryObj.pageParams.limit = val
        this.queryObj.pageParams.page = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.queryObj.pageParams.page = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (tabbarItem) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
         
          if(tabbarItem){
            //修改时，把tabbarItem所属的tabbar带过去
            this.$refs.addOrUpdate.init(tabbarItem.id)
            this.$refs.addOrUpdate.tabbarInit(tabbarItem.tabbarId,this.tabbarList)
          }else{
            //新增时，把选中的tabbar以及所有tabbar带过去
            this.$refs.addOrUpdate.init()
            this.$refs.addOrUpdate.tabbarInit(this.queryObj.and.must.tabbar_id,this.tabbarList)
          }       
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/forum/tabbaritem/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      getDataList(){
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/forum/tabbaritem/multiConditList'),
          method: 'post',
          data: this.$http.adornParams(this.queryObj)
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data.page.list);
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      //获取所有tabbar
      getTabbarList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/forum/tabbar/list'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tabbarList = data.page.list
          } else {
            this.tabbarList = []
          }
        })
      },
      tabClick(tab){
        this.queryObj.and.must.tabbar_id=tab.name
        this.getDataList()
      },
      findTabbarNameById(id){
        let name="";
        this.tabbarList.forEach((tabbar)=>{
          if(tabbar.id==id){
            name=tabbar.name;
          }
        })
        return name;
      }
    }
  }
</script>
